Skip to main content

Adding Dynamic metadata to a page

Metadata plays a crucial role in web development, providing essential details to browsers and search engines. By optimizing metadata, you can improve SEO and enhance web shareability. Let’s explore how to add metadata to your application:

  1. Global metadata: Global metadata applies to all pages within your application. To define global metadata, follow these steps:

Begin by creating a Create a Custom Document. This document allows you to specify metadata tags inside the <Head> component which will be applied to all pages.

server/document.js
import { Head, Body } from "catalyst"
function Document(props) {
    return (
        <html lang="en">
              <Head {...props}>
                  <meta name="description" content="Free Web tutorials"/>
                  <meta name="keywords" content="HTML, CSS, JavaScript"/>
                  <meta name="author" content="John Doe"/>
              </Head>
            <Body {...props} />
        </html>
    )
}
export default Document

The defined metadata tags will be applied to all server-rendered pages. However, keep in mind that they remain static during client navigation. To support client navigation you need to use Page Metadata

  1. Page Metadata: You can define a metadata function and add them to your page function. Using this way you can define different metadata for different pages.

Our document is preloaded with these two meta tags.

<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  1. Page Metadata: Page-specific metadata allows you to customize tags for different pages.

To add page Metadata, create a function that will return an array of metadata. The function will get apiResponse as a parameter.

apiResponse parameter contains responses of clientFetcher and serverFetcher.

const setMetaData = (apiResponse) => {
    return [
        <title>Home Page</title>,
        <meta name="description" content="Free Web tutorials"/>,
        <meta name="keywords" content="HTML, CSS, JavaScript"/>,
        <meta name="author" content="John Doe"/>
    ]
}

The setMetaData needs to be added to the page component with the name setMetaData.

import React from "react"

function HomePage() {
    return <div>Homepage</div>
}

const setMetaData = (apiResponse) => {
    return [
        <title>Home Page</title>,
        <meta name="description" content="Free Web tutorials"/>,
        <meta name="keywords" content="HTML, CSS, JavaScript"/>,
        <meta name="author" content="John Doe"/>
    ]
}

HomePage.setMetaData = setMetaData
export default HomePage